<template>

  <n-form-item :label="component.description" :path="component.type" class="creative-component-form-item">
    <n-select multiple filterable v-model:value="form.value" :options="component.optional" :max-tag-count="20"
      @update:value="changeValue"></n-select>
  </n-form-item>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, unref, watch } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch } from 'naive-ui';

import {

  NSelect,
  NFormItem,
} from 'naive-ui'
const store = useStore();

const creativor = computed(() => store.state.adv.modal.creativor);
const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});
const component = toRef<any, any>(props, 'component')
const form = reactive({
  value: component.value.value.list ? component.value.value.list.map((_: any) => _.id) : []
});

function changeValue(_: any, options: any) {
  let list = options.map((option: any) => {
    return {
      id: option.value,
      text: option.label
    }
  });

  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: {
      list
    }
  })
}




</script>

<style scoped lang="scss">
@import url('./style.scss');
</style>
